import React, { Component } from 'react';

import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import EditIcon from '@material-ui/icons/Edit';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';

class ConfigList extends Component {
  editAccount = account => {
    return () => {
      this.props.editAccount(account);
    };
  };

  deleteAccount = account => {
    return () => {
      this.props.deleteAccount(account);
    };
  };

  selectAccount = account => {
    return () => {
      this.props.selectAccount(account);
    };
  };

  render() {
    const { accounts, currentId } = this.props;

    return (
      <div>
        <List component="nav">
          {accounts.map(account => (
            <ListItem
              key={account.name}
              button
              selected={account.id === currentId}
              onClick={this.selectAccount(account)}
            >
              <ListItemText primary={account.name} />
              <ListItemSecondaryAction>
                <IconButton
                  aria-label="Update"
                  onClick={this.editAccount(account)}
                >
                  <EditIcon />
                </IconButton>
                <IconButton
                  aria-label="Delete"
                  onClick={this.deleteAccount(account)}
                >
                  <DeleteIcon />
                </IconButton>
              </ListItemSecondaryAction>
            </ListItem>
          ))}
        </List>
      </div>
    );
  }
}

export default ConfigList;
